<template>
	<view>
		<view class="prerogative">
			<!-- <cu-custom bgColor="bg-black" :isBack="isBack"><block slot="backText"></block><block slot="content">会员升级</block></cu-custom> -->
			<view class="preroTitle"><image src="/static/images/title.png"></image></view>
			<view class="preroClass">
				<view>
					<view class=""><image src="/static/images/t10.png"></image></view>
					<view class="">购物省钱</view>
				</view>
				<view>
					<view class=""><image src="/static/images/t11.png"></image></view>
					<view class="">分享赚钱</view>
				</view>
				<view>
					<view class=""><image src="/static/images/t12.png"></image></view>
					<view class="">一件包邮</view>
				</view>
				<view>
					<view class=""><image src="/static/images/t13.png"></image></view>
					<view class="">专享礼劵</view>
				</view>
				<view>
					<view class=""><image src="/static/images/t14.png"></image></view>
					<view class="">个人IP打造</view>
				</view>
				<view>
					<view style="width: 48rpx;" class=""><image src="/static/images/t15.png"></image></view>
					<view class="">专享售后</view>
				</view>
			</view>
		</view>

		<view class="memberSetMeal">
			<view class="selectSetMeal">选择会员套餐</view>
			<view class="item">
				<view class="itemLeft">
					<view>298元 购买抖音权益（粉丝、点赞、评价）三选一100条真实流量免费赠送快道平台596个车豆。</view>
					<view @click="memberDetail(227)">查看权益</view>
				</view>
				<view class="itemRight">
					<view>&yen;298</view>
					<view @click="open(1)" v-if="isauth">立即购买</view>
					<view class="bg-gray" v-else>立即购买</view>
				</view>
			</view>
			<view class="item">
				<view class="itemLeft">
					<view>598元 购买抖音权益（粉丝、点赞、评价）三选一200条真实流量免费赠送快道平台1794个车豆。</view>
					<view @click="memberDetail(228)">查看权益</view>
				</view>
				<view class="itemRight">
					<view>&yen;598</view>
					<view @click="open(2)" v-if="isauth">立即购买</view>
					<view class="bg-gray" v-else>立即购买</view>
				</view>
			</view>
		</view>

		<view class="cutOffRule"></view>

		<view class="inRegardTo">
			<view class="inRegardTitle"><image src="/static/images/background18.png"></image></view>
			<view class="inRegardVideo">
				<!-- <video v-if="videoNone" class="myVideo" id="myVideo" :src="videoUrl" object-fit="cover" loop :controls="showControls" enable-play-gesture :direction="0" :show-center-play-btn="false"></video> -->
				<image src="/static/images/background19.png"></image>
			</view>
		</view>

		<!-- 福利弹窗 -->
		<wyb-popup @hide="hidePopup" ref="popup" type="bottom" height="400" width="500" radius="6" :showCloseIcon="true">
			<exclusiveWindow v-if="!videoNone" @close="close" :showBack="showBack"></exclusiveWindow>
		</wyb-popup>
	</view>
</template>

<script>
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
import exclusiveWindow from '@/components/exclusiveWindow/exclusiveWindow.vue';
import cuCustom from '@/static/colorui/components/cu-custom.vue'
export default {
	data() {
		return {
			showBack: 1, // 显示的样式
			exclusiveList: [], // 福利数据
			price: '298', // 选中会员价格
			welfareId: '', // 选中福利Id
			worth: 596, // 显示的价格
			videoUrl: 'https://douke.aixihui.net/1.mp4', // 视频路径
			showControls: true,
			videoNone:true,
			isBack:false,
			isauth:false,//是否可以升级,
			authmsg:'',	//不能升级原因
		};
	},
	components: {
		wybPopup,
		exclusiveWindow,
		cuCustom
	},
	onShow() {
		this.auth();
		// const WeixinJSBridge  = this.$wechat.isWechat()// 判断是否是在微信浏览器
	},	
	methods: {
		// 监听弹出框隐藏
		hidePopup() {
			this.videoNone = true
		},
		// 显示modal弹出框
		open(e) {
			if(!this.isauth){
				this.$common.errorToShow(this.authmsg);
				return;
			}
			this.showBack = e
			this.$refs.popup.show() // 显示
			this.videoNone = false
		},
		close() {
			this.$refs.popup.hide() // 显示
		},
		// 选择福利
		selectExclusive(item) {
			if (item.checked == 1) {
				item.checked = 0;
				this.welfareId = '';
			} else {
				item.checked = 1;
				this.exclusiveList.forEach(welfare => {
					if (welfare.combination_id !== item.combination_id) {
						welfare.checked = 0;
					}
				});
				this.welfareId = item.combination_id;
			}
		},
		auth(){
			this.$api.getAuthVip({},res=>{
				if(res.status==200){
					this.isauth = true;
				} else {
					this.authmsg = res.message;
					this.isauth = false;
				}
			})
		},
		// 立即购买 跳转支付页面
		shopMember() {
			if (!this.welfareId) {
				this.$common.errorToShow('请选择赠送套餐');
				return;
			}
			uni.navigateTo({
				url: `/pages/users/user-pay/user-pay?price=${this.price}&welfare=${this.welfareId}`
			});
			this.welfareId = '';
		},
		// 选择会员
		selectPrice(index, price) {
			if (this.showBack == index) return;
			this.showBack = index;
			if (this.showBack == 1) {
				this.worth = 596;
			} else {
				this.worth = 1794;
			}
			this.price = price;
			this.welfareId = '';
			this.getExclusiveList();
		},
		// 获取福利列表
		getExclusiveList() {
			this.$api.getExclusiveList(
				{
					source_id: this.showBack
				},
				res => {
					this.exclusiveList = res.data.combination;
				}
			);
		},
		// 查看文章详情
		memberDetail(memberId) {
			this.$common.navigateTo('/pages/article/index?id=' + memberId + '&id_type=1');
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}

.bg-gray {
	background:#F0F0F0 !important;
}

.prerogative {
	width: 100%;
	height: 645rpx;
	background: url(../../static/images/background15.png) no-repeat;
	background-size: 100% 100%;
	padding: 100rpx 0 0;
	.preroTitle {
		width: 437rpx;
		height: 41rpx;
		margin: 0 auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.preroClass {
		display: flex;
		// justify-content: space-between;
		align-content: space-around;
		flex-direction: row;
		flex-wrap: wrap;
		color: #ffffff;
		margin-top: 90rpx;
		view {
			width: 33%;
			margin-bottom: 25rpx;
			view:first-child {
				width: 66rpx;
				height: 59rpx;
				margin: 0 auto;
				image {
					width: 100%;
					height: 100%;
				}
			}
			view:last-child {
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
}

.memberSetMeal {
	.selectSetMeal {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}
	.selectSetMeal::before {
		content: '';
		display: inline-block;
		width: 6rpx;
		height: 34rpx;
		background-color: #000000;
		vertical-align: middle;
		margin-right: 10rpx;
	}
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		height: 230rpx;
		border-radius: 20rpx;
		border: 1rpx solid #ececec;
		margin: 0 auto 20rpx;
		box-shadow: 0 0 20rpx #f8efe6;
		padding: 20rpx;
		.itemLeft {
			flex: 1;
			font-size: 26rpx;
			padding-right: 40rpx;
			border-right: 1rpx dashed #cccccc;
			font-family: PingFang SC;
			font-weight: 700;
			color: #804b02;
			view:last-child {
				color: #999999;
				margin-top: 15rpx;
			}
		}

		.itemRight {
			text-align: center;
			margin-left: 60rpx;
			view:first-child {
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #f95150;
			}
			view:last-child {
				width: 136rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				background: linear-gradient(90deg, #ff9e00 0%, #ff6500 100%);
				border-radius: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
		}
	}
}

.cutOffRule {
	height: 10rpx;
	background-color: #ececec;
}

.inRegardTo {
	margin-bottom: 80rpx;
	.inRegardTitle {
		width: 554rpx;
		height: 41rpx;
		margin: 20rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.inRegardVideo {
		width: 663rpx;
		height: 443rpx;
		margin: 0 auto;
		.myVideo {
			width: 100%;
			border-radius: 20rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.postWindow {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

</style>
